<template>
	<view class="my-page">
		<!-- 顶部区域：登录态动态切换 -->
		<view class="top-bar" v-if="isLogin">
			<view class="bg-container">
				<image class="bg-image" :src="getFullImageUrl('@/static/image/bgmy.png')" mode="aspectFill"></image>
			</view>
			<!-- 已登录：显示头像、用户名、完善信息 -->
			<view class="content-wrapper">
				<view class="content-top" @click="goPage('personal')">
					<view class="left-content">
						<view class="avatar-container">
							<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
						</view>

						<view class="user-info">
							<text class="username">{{ userInfo.username }}</text>
							<text class="perfect-info" v-if="!userInfo.gender || !userInfo.age || !userInfo.height">
								点击前往完善信息
							</text>
							<text class="perfect-info" v-else>
								{{ userInfo.gender }}　{{ userInfo.age }}岁　{{ userInfo.height }}cm
							</text>
						</view>
					</view>
					<!-- <uni-icons type="right" size="19" color="#D0D4D7"></uni-icons> -->
					<image :src="getFullImageUrl('@/static/my/gerenyou.png')" style="width: 17rpx; height: 27rpx;">
					</image>

				</view>
				<!-- 自我描述 + 状态标签 -->
				<view class="desc-tag-group">
					<text class="self-desc">自我描述：{{ userInfo.selfDesc }}</text>
					<view class="tag-group">
						<view class="tag-reputation">
							<view class="tag-icon">
								<image :src="getFullImageUrl('@/static/my/tagRep.png')"
									style="width: 62rpx; height: 32rpx;"></image>
								<text class="tag-badge">{{ userInfo.reputation_points }}</text>
							</view>
							<text>{{ userInfo.reputation_points > 80 ? '信誉很好' : (userInfo.reputation_points >= 60 &&
								userInfo.reputation_points <= 80) ? '信誉一般' : '信誉很差' }}</text>
						</view>

						<view class="tag-rating">
							<view class="tag-icon2">
								<text>{{ userInfo.positive_review_rate }}%</text>
							</view>
							<text>好评率</text>
						</view>

						<view class="tag-verify" :class="{ 'verified': userInfo.realname_verified === '已实名' }">
							<view class="tag-icon3">
								<image :src="getFullImageUrl('@/static/my/tb.png')"
									style="width: 33rpx; height: 32rpx;"></image>
							</view>
							<text>{{ userInfo.realname_verified }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="top-bar" v-else>
			<!-- 未登录：仅显示登录入口 -->
			<view class="bg-container">
				<image class="bg-image" :src="getFullImageUrl('@/static/image/bgmy.png')" mode="aspectFill"></image>
			</view>
			<view class="content-wrapper" @click="goLogin" style="margin-top: -180rpx;">

				<view class="left-content">
					<view class="avatar-box">
						<image class="avatar" :src="defaultAvatar" mode="aspectFill"></image>
					</view>

					<text class="login-text">登录/注册</text>
				</view>
				<uni-icons type="right" size="19" color="#D0D4D7"></uni-icons>
			</view>
		</view>

		<!-- 新增技能标签模块：条件显示 -->
		<view class="skills-box" v-if="skills.length > 0" :style="{ marginTop: skills.length > 0 ? '-220rpx' : '0' }">

			<view class="skills-tags">
				<view class="skill-tag" v-for="(skill, index) in skills" :key="index">
					<text class="tag-text">{{ skill.name }}</text>
				</view>
			</view>
		</view>

		<!-- 我的钱包区域：数据动态渲染 -->
		<view class="wallet-box" :style="{ marginTop: isLogin ? (skills.length > 0 ? '20rpx' : '-130rpx') : '-190rpx' }"
			@click="goWalletDetail">
			<view class="wallet-title">
				<text class="title-text">我的钱包</text>
				<view class="wallet-right">
					<text class="detail-text">查看明细</text>
					<image :src="getFullImageUrl('@/static/my/qianbaoyou.png')" style="width: 10rpx; height: 16rpx;">
					</image>
				</view>
			</view>
			<view class="wallet-info">
				<view class="info-item" v-for="(item, index) in walletList" :key="index">

					<text class="info-number">{{ item.value }}</text>
					<text class="info-desc">{{ item.label }}</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单区域：复用原逻辑 -->
		<view class="func-menu">
			<view class="menu-row">
				<view class="menu-item" @click="goPage('personal')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/个人资料.png')"></image>
					<text class="menu-text">个人资料</text>
				</view>
				<view class="menu-item" @click="goPage('auth')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/实名认证.png')"></image>
					<text class="menu-text">实名认证</text>
				</view>
				<view class="menu-item" @click="goPage('bindPhone')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/改绑手机号.png')"></image>
					<text class="menu-text">改绑手机号</text>
				</view>
				<view class="menu-item" @click="goPage('rules')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/平台规则.png')"></image>
					<text class="menu-text">平台规则</text>
				</view>
			</view>
			<view class="menu-row">
				<view class="menu-item" @click="goPage('service')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/客服中心.png')"></image>
					<text class="menu-text">客服中心</text>
				</view>
				<view class="menu-item" @click="goPage('comment')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/评论中心.png')"></image>
					<text class="menu-text">评论中心</text>
				</view>
				<view class="menu-item" @click="goPage('dynamic')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/我的动态.png')"></image>
					<text class="menu-text">我的动态</text>
				</view>
				<view class="menu-item" @click="goPage('order')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/订单中心.png')"></image>
					<text class="menu-text">订单中心</text>
				</view>
			</view>
			<view class="menu-row">
				<view class="menu-item" @click="goPage('withdrawal')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/订单中心.png')"></image>
					<text class="menu-text">提现记录</text>
				</view>
				<view class="menu-item" @click="goPage('setting')">
					<image class="menu-icon" :src="getFullImageUrl('@/static/my/设置.png')"></image>
					<text class="menu-text">设置</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getFullImageUrl, initBaseUrl, request } from '../../utils/request';
import './index.scss';
export default {
	data() {
		return {
			// 登录状态控制
			isLogin: false, // 默认未登录
			// 未登录默认头像
			// defaultAvatar: "/static/image/logo.jpg",
			// 用户信息（已登录时用）
			userInfo: {
				avatar: "", // 替换为真实头像
				username: "",
				selfDesc: "-", // 自我描述
				gender: "", // 性别
				age: "", // 年龄
				height: "", // 身高
				realname_verified: '', // 实名认证
				reputation_points: 0, // 信誉分
				positive_review_rate: 0, // 好评率


			},

			// 钱包数据（动态渲染）
			walletList: [
				{ label: "余额（元）", value: "0.0" },
				{ label: "待结算", value: "0.0" },
				// { label: "可借贷款", value: "10000" },
			],
			// 新增技能标签数据
			skills: [] // 默认为空，填写后显示技能
		};
	},
	async onLoad() {
		// 从本地存储获取token判断登录状态
		const token = uni.getStorageSync('token');
		initBaseUrl();
		this.isLogin = !!token; // 如果token存在则设置为已登录状态
		console.log(this.isLogin);
		// 如果已登录，获取用户信息
		if (this.isLogin) {
			await this.fetchUserInfo(); // 调用接口拉取用户数据
			await this.fetchWalletBalance(); // 调用接口拉取钱包余额

		}
	},
	onShow() {
		// 从本地存储获取token判断登录状态
		const token = uni.getStorageSync('token');

		this.isLogin = !!token; // 如果token存在则设置为已登录状态
		console.log(this.isLogin);
		// 如果已登录，获取用户信息
		if (this.isLogin) {
			this.fetchUserInfo(); // 调用接口拉取用户数据

		}
	},
	methods: {
		getFullImageUrl,
		// 前往登录页（未登录时用）
		goLogin() {
			uni.navigateTo({ url: "/pages/pageLogin/index" });
		},
		// 前往钱包明细
		goWalletDetail() {
			uni.navigateTo({ url: "/pages/pageMy/walletBalance/walletBalance" });
		},
		// 功能页通用跳转
		goPage(page) {
			let urlMap = {
				personal: "/pages/pageMy/personalData/personalData",
				auth: "/pages/pageMy/Authn/Authn",
				bindPhone: "/pages/pageMy/changePhoneNumber/changePhoneNumber",
				rules: "/pages/pageMy/platformRules/platformRules",
				service: "/pages/pageMy/customerService/customerService",
				comment: "/pages/pageMy/commentCenter/commentCenter",
				dynamic: "/pages/discover/myDynamics/myDynamics",
				order: "/pages/pageMy/orderCenter/orderCenter",
				setting: "/pages/pageMy/Setting/Setting",
				withdrawal: "/pages/pageMy/withdrawalRecord/withdrawalRecord",
			};
			// 检查是否是实名认证且已认证
			if (page === 'auth' && this.userInfo.realname_verified === 1) {
				uni.showToast({
					title: '您已实名',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({ url: urlMap[page] });
		},

		// 获取用户信息并赋值
		async fetchUserInfo() {
			try {
				const res = await request({
					url: '/User/info',
					method: 'GET'
				});

				if (res.code === 200 && res.data) {
					const userInfo = res.data;
					this.userInfo = {
						avatar: userInfo.avatar || '/static/image/logo.jpg',
						username: userInfo.nickname || 'AIYR528D16',
						selfDesc: userInfo.bio || '-',
						gender: userInfo.gender === 0 ? '男' : userInfo.gender === 1 ? '女' : '',
						age: userInfo.age || '',
						height: userInfo.height || '',
						realname_verified: userInfo.realname_verified === 1 ? '已实名' : '未实名',
						reputation_points: userInfo.reputation_points || 0,
						positive_review_rate: userInfo.positive_review_rate || 0,

					};
					// 筛选出selected为true的技能用于页面显示
					this.skills = JSON.parse(userInfo.skill_description).filter(skill => skill.selected)
					// console.log('获取用户信息:', userInfo);
				}
			} catch (err) {
				console.error('获取用户信息错误:', err);
				// 尝试从本地存储加载

			}
		},



		// 获取钱包余额
		async fetchWalletBalance() {
			try {
				const res = await request({
					url: '/User/wallet',
					method: 'GET'
				});
				if (res.code === 200 && res.data) {
					this.walletList = [
						{
							label: "余额（元）",
							value: res.data.balance ? Number(res.data.balance).toFixed(2) : "0.00"
						},
						{
							label: "待结算",
							value: res.data.pending_settlement ? Number(res.data.pending_settlement).toFixed(2) : "0.00"
						},
						// { label: "可借贷款", value:  res.data.loan_balance ? Number(res.data.loan_balance).toFixed(2) : "0.00" },
					];
				}
				// console.log("获取钱包余额", res);
			}
			catch (err) {
				console.error('获取钱包余额错误:', err);
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.my-page {
	background-color: #F2F3F8;
	min-height: 100vh;
	// padding: 15rpx;

	// 顶部区域：适配登录态
	.top-bar {
		display: flex;
		align-items: center;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		/* 确保圆角效果 */
		min-height: 700rpx;
		/* 设置最小高度 */
		margin-bottom: 10rpx;

		.bg-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;

			.bg-image {
				width: 100%;
				height: 100%;
			}
		}

		.content-wrapper {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 2;
			padding: 20rpx;
			margin-top: -60rpx;
			margin-left: 15rpx;

			.left-content {
				width: 640rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;

				.avatar-box {
					width: 140rpx;
					height: 140rpx;
					background: #FFFFFF;
					border-radius: 50%;
					opacity: 0.8;
					/* 添加Flexbox实现居中 */
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;



					.avatar {
						width: 126rpx;
						height: 126rpx;
						background: #D0D4D7;
						border-radius: 50%;
						/* 移除干扰居中的margin */
						margin: 0;
					}


				}
			}

			.content-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-content {
					width: 640rpx;
					display: flex;
					align-items: center;

					// justify-content: space-between;
					.avatar-container {
						width: 140rpx;
						height: 140rpx;
						background: #FFFFFF;
						border-radius: 50%;
						opacity: 0.8;
						/* 添加Flexbox实现居中 */
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 24rpx;
						margin-bottom: 10rpx;

						.avatar {
							width: 126rpx;
							height: 126rpx;
							background: #D0D4D7;
							border-radius: 50%;
							
							
						}
					}

					// 已登录用户信息
					.user-info {
						.username {
							font-size: 34rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 8rpx;
							display: block;
						}

						.perfect-info {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							color: #0E1C37;
							line-height: 26rpx;
						}
					}
				}
			}





			// 自我描述 + 标签组
			.desc-tag-group {
				margin-top: 40rpx;

				.self-desc {

					font-size: 26rpx;
					color: #0E1C37;
					line-height: 26rpx;
					display: block;
					margin-bottom: 40rpx;
				}

				.tag-group {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.tag-reputation,
					.tag-rating,
					.tag-verify {
						display: flex;
						align-items: center;
						padding: 10rpx 16rpx;
						border-radius: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 26rpx;

						// 分别给不同标签设置背景色，模拟示例效果
						&.tag-reputation {
							background: rgba(247, 111, 23, 0.1);

							.tag-icon {
								position: relative;
								margin-right: 12rpx;

								image {
									display: block;
								}

								.tag-badge {
									position: absolute;
									top: 50%;
									left: calc(50% - 2rpx);
									transform: translate(-50%, -50%);
									font-family: Source Han Sans CN;
									font-weight: 500;
									font-size: 22rpx;
									color: #FFFFFF;
									text-shadow: 0rpx 1rpx 3rpx rgba(241, 106, 12, 0.67);
									z-index: 1;
								}
							}

							text {
								color: #F76F17;
							}
						}

						&.tag-rating {
							background: rgba(88, 148, 246, 0.1);

							text {
								color: #5894F6;
							}

							.tag-icon2 {
								padding: 6rpx 12rpx;
								background: linear-gradient(100deg, #77ABFF 0%, #4789F3 100%);
								border-radius: 26rpx;
								display: flex;
								justify-content: center;
								align-items: center;

								text {

									font-family: Source Han Sans CN;
									font-weight: 500;
									font-size: 22rpx;
									color: #FFFFFF;
									text-shadow: 0rpx 1rpx 3rpx rgba(33, 106, 226, 0.67);
								}

								margin-right: 12rpx;
							}


						}

						&.tag-verify {
							background: rgba(14, 28, 55, 0.1);

							.tag-icon3 {
								display: flex;
								align-items: center;
							}

							text {
								color: #888B9A;
								margin-left: 12rpx;
							}

							&.verified {
								background: rgba(76, 231, 0, 0.1);

								text {
									color: #38AB00;
								}
							}
						}
					}
				}


			}

			// 未登录文案
			.login-text {
				font-weight: 500;
				font-size: 36rpx;
				color: #0E1C37;
				line-height: 26rpx;
			}
		}
	}

	// 新增技能标签模块样式
	.skills-box {
		width: 640rpx;
		margin: 0 auto;

		background: #fff;
		border-radius: 26rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		z-index: 10;
		position: relative;


		.skills-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.skill-tag {
				display: flex;
				align-items: center;
				background-color: #EEF2F3;
				border-radius: 26rpx;
				padding: 13rpx 33rpx;
				// padding-right: 12rpx;s

				.tag-text {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #888B9A;
					line-height: 26rpx;
					// margin-right: 10rpx;
				}

				.tag-close {
					margin-top: 2rpx;
				}
			}
		}
	}

	// 我的钱包盒子（复用逻辑，数据动态渲染）
	.wallet-box {
		width: 640rpx;
		margin: 0 auto;
		margin-top: -200rpx;
		background: #fff;
		border-radius: 26rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		z-index: 10;
		/* 提高层级至头部上方 */
		position: relative;




		.wallet-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 60rpx;


			.title-text {
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
			}

			.detail-text {
				font-size: 22rpx;
				color: #888B9A;
				margin-right: 12rpx;
			}

			.wallet-right {
				display: flex;
				align-items: center;
			}
		}

		.wallet-info {
			display: flex;
			justify-content: space-around;

			.info-item {
				text-align: center;


				.info-number {
					font-weight: bold;
					font-size: 42rpx;
					color: #0E1C37;
					display: block;
					margin-bottom: 10rpx;
				}

				.info-desc {
					font-weight: 400;
					font-size: 22rpx;
					color: #0E1C37;
				}
			}
		}
	}

	// 功能菜单（完全复用）
	.func-menu {
		width: 697rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 26rpx;
		padding: 1.5rpx;
		padding-top: 40rpx;
		padding-bottom: 5rpx;

		.menu-row {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 40rpx;

			.menu-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-bottom: 20rpx;

				.menu-icon {
					width: 42rpx;
					height: 42rpx;
					margin-bottom: 27rpx;
				}

				.menu-text {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #0E1C37;
					line-height: 25rpx;
				}
			}
		}
	}
}
</style>